<template>
	<!-- <view class="websockets"> -->
		<!-- <button type="primary" @tap="clickRequest">点击发送请求</button> -->
		<!-- <button type="primary" @tap="leave">离开页面</button> -->
		<view class="message" v-if="socketTaskData.length" @touchstart="playState='paused'" @touchend="playState='play'">
			<!-- <image src="../../../static/images/index_message.png" />  -->
			<view class="message_content" style="width: 100%;">
				<!-- <text class="message_title">消息</text><text class="message_line">|</text><text class="message_text">销售经理高强向您分配一条线索</text>。 -->
				<view class="" style="display: flex;align-content: center;position: absolute;height: 70rpx;line-height: 69rpx;margin-left:10rpx">
					<u-icon name="bell-fill"  color="#ff9900" top='-1' size="32"></u-icon>
					<view style="margin-left: 12rpx;color: #43425D;">消息</view>
					<u-line color="#A5A4BF" direction="col" margin='calc(50% - 25px) 10px' length='26' />
				</view>
				<u-notice-bar mode="horizontal" type="none"  :volume-icon='false'  padding='18rpx 24rpx 18rpx 140rpx' bg-color='#FFFFFF' :play-state="playState"  :is-circular="false" :list="noticeList" more-icon @click="noticeFun" @getMore='getMoreFun'></u-notice-bar>
			
			</view>
			<!-- <view class="message_more">点击查看</view> -->
		</view>
	<!-- </view> -->
</template>
 
<script>
	import {getRead} from "@/service/api/api";
	import helper from "@/common/helper.js"
	export default {
		onLoad() {
			this.userInfo = uni.getStorageSync('user_info')
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			this.connectSocketInit();
		},
		props:{
			noticeLength:{
				type:Number,
				
			}
		},
		data() {
			return {
				userInfo:{},
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,
				playState:'play',
				socketTaskData:[],
				noticeList: [
				],
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('user_info')
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			this.connectSocketInit();
			console.log(helper.websocketsUrl)
		},
		// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
		beforeDestroy() {
			this.closeSocket();
		},
		
		methods: {
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			connectSocketInit() {
				console.log(this.userInfo)
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					// url: "ws://192.168.100.145:10080/clue/message/"+this.userInfo.userId,
					url: helper.websocketsUrl+this.userInfo.userId,
					success(data) {
						console.log("websocket连接成功");
					},
				});
 
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.socketTask.send({
						data: "uni-app发送一条消息",
						async success() {
							console.log("消息发送成功");
						},
					});
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log("收到服务器内容：" + res.data);
						this.socketTaskData=JSON.parse(res.data)
						
						this.socketTaskData.forEach((v,i)=>{
							this.noticeList.push(v.msg)
						})
						this.$emit('update:noticeLength',this.socketTaskData.length)
						
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			clickRequest() {
				if (this.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
					this.socketTask.send({
						data: "请求一次发送一次message",
						async success() {
							console.log("消息发送成功");
						},
					});
				}
			},
			leave() {
				uni.redirectTo({
					url:"/pages/home/manager/index"
				})
				console.log("likai")
			},
			//点击消息文字触发		 
			//销售顾问 分配：跳转到 新分配  销售经理 派发：跳转到 待分配
			async noticeFun(e){
				console.log(this.socketTaskData[e].id,'点击消息文字触发')
				if (this.socketTaskData[e].msg.indexOf('分配')!=-1) {
					console.log('跳转到顾问新分配页面')
					// uni.navigateTo({
					// 	url:'/pages/clue/adviser/newAssign/index'
					// })
				}else if(this.socketTaskData[e].msg.indexOf('派发')!=-1){
					console.log('跳转到经理待分配页面')
					// uni.navigateTo({
					// 	url:'/pages/clue/manager/stayAssign/index'
					// })
				}
				//消息是否已读 测试
				// uni.request({
				//     url: 'http://192.168.100.145:10080/clue/message/read', 
				//     data: {
				//         id: Number(this.socketTaskData[e].id)
				//     },
				// 	method:'POST',
				//     header: {
				//        'Content-Type': 'application/x-www-form-urlencoded',
				//     },
				//     success: (res) => {
				//         console.log(res.data,'sdfsdfsdf');
				       
				//     }
				// });
				//消息是否已读 
				await getRead({id:Number(this.socketTaskData[e].id)})
			},
			//点击 >
			getMoreFun(e){
				console.log('消息通知跳转')
			},
		}
	}
</script>
<style lang="scss" scoped>
	.message_title {
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.message_more {
		color: #3B86FF;
	}
	
	.message_line {
		opacity: 0.7;
		margin: 0 7rpx;
	}
	
	.message_text {
		opacity: 0.7;
	}
	
	.message {
		// width: 690rpx;
		height: 70rpx;
		background: #FBFBFB;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 0 30rpx;
		// margin-top: -40rpx;
		line-height: 80rpx;
		display: flex;
		font-size: 26rpx;
		color: #43425D;
		margin-top: 85px;
	}
	
	.message_content {
		color: #43425D;
		padding-left: 8rpx;
		padding-right: 8rpx;
	}
	
	.message_text {
		color: #43425D;
	}
	
	.message image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
		margin-left: 20rpx;
	}
	
</style>